<template>
  <div class="w-full flex flex-col">
    <div class="mb-5 flex-1" style="height: calc(100% - 40px);">
      <div class="p-5 bg-white rounded-[6px] mb-6">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-2">
            <span class="text-black/[0.65] text-base">审核状态：</span>
            <el-radio-group v-model="studyStatus" :max="1" @change="getTestPaperList">
              <!-- <el-radio class="text-black/[0.88]" label="全部" value="00" /> -->
              <el-radio class="text-black/[0.88]" label="草稿" value="0"  v-if="userStore.userInfo.user_type == 2 || userStore.userInfo.user_type == 3  || userStore.userInfo.user_type == 5"/>
              <el-radio class="text-black/[0.88]" label="审核中" value="1" />
              <el-radio class="text-black/[0.88]" label="已通过" value="3" />
            </el-radio-group>
          </div>
          <div class="flex items-center gap-2">
            <div class="flex items-center">
              <el-select v-if="userStore.userInfo.user_type == 4" v-model="company" placeholder="请选择发布单位"
              :empty-values="[null, undefined]"
              :value-on-clear="null" clearable
                style="width: 240px;height: 32px;">
                <el-option v-for="item in companyOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-input v-model="courseName" style="width: 240px;height: 32px;" placeholder="请输入考核名称">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <search />
                  </el-icon>
                </template>
              </el-input>
              <Button @click="getTestPaperList">搜索</Button>
            </div>
          </div>
        </div>
      </div>
      <div class="h-full overflow-auto" style="height: calc(100% - 100px);">
        <div class="grid grid-cols-4 gap-4">
        <assessCard :cardData="cardData" card-type="2" @cardClick="handleCardClick" />
      </div>
      </div>
      
    </div>
    <div class="flex justify-center items-center">
      <el-pagination :current-page="paginationData.currentPage" :page-size="paginationData.pageSize"
        :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import assessCard from "@/views/examCourses/components/assessCard.vue";
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { examApi } from "@/api/index.js";
import { useUserStore } from "@/stores/user.js";
import { StorageUtil } from "@/utils/common.js";
const userStore = useUserStore();
const router = useRouter()
const cardData = ref([])
const studyStatus = ref('1')
const courseName = ref('')
const company = ref(null)
const companyOptions = ref([])
const paginationData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

onMounted(() => {
  if (userStore.userInfo.user_type == 4) {
    studyStatus.value = '1'
    getCompanyOptions()
  } else {
    company.value = userStore.userInfo.company_id || ''
    studyStatus.value = '0'
    getTestPaperList()
  }
})

//获取单位下拉
const getCompanyOptions = () => {
  examApi.getCompanyOptions({
    has_society: 1
  }).then(res => {
    companyOptions.value = res || []
    companyOptions.value.unshift({
      name: '全部',
      id: null
    })
    // company.value = res[0]?.id

    getTestPaperList()
  })
}

//获取考核列表
const getTestPaperList = () => {
  if (!studyStatus.value) {
    return
  }
  const params = {
    name: courseName.value,
    status: studyStatus.value,
    company: company.value,
    page: paginationData.currentPage,
    pageSize: paginationData.pageSize,
  }
  examApi.getTestPaperList(params).then(({ items, total }) => {
    if (items && items.length > 0) {
      cardData.value = items
    } else {
      cardData.value = []
    }
    
    paginationData.total = total
  })
}

const handleCardClick = (row) => {
  StorageUtil.session.set('assessData', row)
  router.push({
    path: '/examCourses/assessDetail',
    query: {
      id: row.id,
      name: row.name
    }
  })
}
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getTestPaperList()
}
const handleCurrentChange = (val) => {
  paginationData.currentPage = val;
  getTestPaperList()
}
</script>

<style scoped>
:deep(.el-breadcrumb__inner.is-link) {
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #33A0FF;
  font-weight: 500;
}
</style>
